<template>
<view>
	<cu-custom bgColor="bg-gradual-blue" :isBack="true">
		<block slot="backText">返回</block>
		<block slot="content">消费详情</block>
	</cu-custom>	
	<view class="detail">		
		<view>
			<text>{{ desc.type ? '出' : '入' }}账金额</text>
			<text class="red">{{ desc.type ? '-' : '+' }}{{ desc.money }}</text>
		</view>
		<view>
			<text>类型</text>
			<text>{{ desc.consume_type }}</text>
		</view>
		<view>
			<text>时间</text>
			<text>{{ desc.createtime }}</text>
		</view>
		<view>
			<text>订单号</text>
			<text>{{ desc.batchcode }}</text>
		</view>
		<view class="area">
			<text>备注</text>
			<text>{{ desc.remark }}</text>
		</view>
	</view>	
</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	import{ GetMoneyDetails } from '@/common/api/users'
	export default {
		name: 'rdetail',
		data () {
			return {
				desc: {}
			}
		},
		onLoad(opt) {
			this.getInfo(opt.id)
		},
		computed: {
			...mapGetters([
				'userInfo'
			])
		},
		methods: {
			getInfo (id) {
				uni.showLoading()
				GetMoneyDetails({ user_id: this.userInfo.id, id }).then(res => {
					uni.hideLoading()
					if (!res.code) this.desc = res.data
				})
			}
		}
	}
</script>

<style lang="less" scoped>
@import '../common/styles/variables.less';
.detail {
	background-color:white;
	& > view {
		display: flex;
		height: @height;
		justify-content: space-between;
		align-items: center;
		padding: 0 15upx;
		font-size: 14px;
		overflow: hidden;
		&:not(:last-of-type) {
			.border-bottom(15upx);
		}
		&.area { 
			height: 120upx;
			align-items: flex-start;
			padding: 15upx;
		}
		& > text {
			&.red { font-weight: 600;color:@red }
			&:nth-of-type(1) {
				width: 120upx;
				text-align: justify;
				text-align-last: justify;
				margin-right: 20upx;
			}
			&:nth-of-type(2) {
				text-align: right;
				flex: 1;
			}
		}
	}
}
</style>
